<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form ref="modalForm" :model="dataSource" status-icon>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item v-if="modalType === 'edit'" label="小区编号" :label-width="formLabelWidth">
            <el-input v-model="dataSource.id" disabled autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="小区名称："
            prop="villageName"
            :label-width="formLabelWidth"
            :rules="[
              { required: true, message: '名称不能为空',trigger:'blur,change'},
              { min: 3,max:10, message: '长度在3-10个字符之间',trigger:'change'}
            ]"
          >
            <el-input v-model="dataSource.villageName" placeholder="请输入小区名称" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        label="隶属管辖区县："
        prop="cotyCode"
        :label-width="formLabelWidth"
        :rules="[
          { required: true, message: '隶属管辖区县不能为空',trigger:'blur,change'}
        ]"
      >
        <el-input :value="hasSelectedCotyObj.value" placeholder="请选择小区的隶属管辖区县" autocomplete="off" @click.native="showCotyDialog" />
        <el-dialog
          :visible.sync="dialogCotyVisible"
          append-to-body
        >
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行查询"
          />
          <div class="down-tree">
            <el-tree
              ref="tree"
              class="filter-tree"
              :data="dictsInfo"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogCotyVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirmCoty">确 定</el-button>
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm('modalForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addOneVillageInfo, modifyOneVillageInfo } from '@/api/ht/xqzhgl/xqgl/xqxxgl'
const { Message } = require('element-ui')
export default {
  name: 'Modal',
  props: {
    villageInfo: {
      type: Object,
      default: () => {
        return {
          id: '',
          villageName: '',
          cotyCode: ''
        }
      }
    },
    villageCotyCode: {
      type: String,
      default: ''
    },
    dictsInfo: {
      type: Array,
      default: () => []
    },
    alldictsInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: '小区信息',
      filterText: '',
      formLabelWidth: '150px', // 表单输入框字段宽度
      dialogFormVisible: false, // 对话框是否显示
      dialogCotyVisible: false, // 区县选择对话框是否显示
      modalType: 'add',
      dataSource: { // 数据源
      },
      hasSelectedCotyObj: {}, // 选中的区县对象
      departmentTypeArray: [], // 部门类型列表
      defaultProps: {
        children: 'children',
        label: 'value'
      }
    }
  },
  watch: {
    villageInfo(newdata, prevdata) {
      this.dataSource = newdata
      this.hasSelectedCotyObj.value = this.alldictsInfo.find(item => item.code === newdata.cotyCode).value
      this.title = '小区信息修改' + this.dataSource.id
    },
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.value.indexOf(value) !== -1
    },
    checkModelType(type) {
      this.modalType = type
      // 展示对话框
      this.dialogFormVisible = true
      // 判断是编辑还是新增
      if (type === 'add') {
        // 置空
        this.title = '小区信息'
        // 获取父的已经选择的区县信息 填入待选区县中
        this.hasSelectedCotyObj.code = this.villageCotyCode
        this.hasSelectedCotyObj.value = this.alldictsInfo.find(item => item.code === this.villageCotyCode).value
        this.dataSource = { cotyCode: this.hasSelectedCotyObj.code }
      }
    },
    handleConfirm(formName) {
      const type = this.modalType
      // 判断是编辑还是新增
      if (type === 'add') {
        // 调用新增请求
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addVillageInfoHandle()
          } else {
            console.log('表单缺少数据或者不符合要求')
            return false
          }
        })
      } else {
        // 调用修改请求
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.modifyVillageInfoHandle()
          } else {
            console.log('表单缺少数据或者不符合要求')
            return false
          }
        })
      }
    },
    handleConfirmCoty() {
      this.dataSource.cotyCode = this.hasSelectedCotyObj.code
      this.dialogCotyVisible = false
    },
    handleNodeClick(clickobj, Node, Tree) {
      // 点击父节点不进行操作
      if (clickobj.children) { return null }
      // 点击子节点进行逻辑操作
      this.hasSelectedCotyObj = clickobj
    },
    showCotyDialog() {
      this.dialogCotyVisible = true
    },
    addVillageInfoHandle() {
      this.addVillageInfo()
    },
    modifyVillageInfoHandle() {
      this.modifyVillageInfo()
    },
    async addVillageInfo() {
      const res = await addOneVillageInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async modifyVillageInfo() {
      const res = await modifyOneVillageInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    reflushDataHandle() {
      // 调用父组件获取方法刷新数据
      this.$emit('reflushDataHandle')
    }
  }
}
</script>

<style scoped>
.down-tree{
  height: 350px;
  display: block;
  overflow-y: scroll;
}
</style>
